<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: zhr
 * @LastEditTime: 2022-01-07 12:41:25
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom2_container" id="container" style="height: 95%"></div>
</template>

<script>
import {Gauge} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[],
       percent:0
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
initChart(){
  const ticks = [0, 1 / 3, 2 / 3, 1];
const color = ['#F4664A', '#FAAD14', '#30BF78'];

  const gauge = new Gauge(this.$refs.bottom2_container,{
  percent: this.percent,
  range: {
    ticks: [0, 1],
    color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  statistic: {
    title: {
      formatter: ({ percent }) => {
        if (percent < ticks[1]) {
          return '差';
        }
        if (percent < ticks[2]) {
          return '中';
        }
        return '优';
      },
      style: ({ percent }) => {
        return {
          fontSize: '36px',
          lineHeight: 1,
          color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
        };
      },
    },
    content: {
      offsetY: 36,
      style: {
        fontSize: '24px',
        color: '#4B535E',
      },
      formatter: () => '系统表现',
    },
  },
  });

  gauge.render();
  setInterval(()=>{
    if(this.percent < 0.5){
     this.percent+=0.01
     gauge.changeData(this.percent);
    }else{
      this.percent = 0.5
    }
  },50)
}
}
}
</script>

<style scoped>

</style>